@charset "utf-8";

$list-rank-bg-default: #616161;
$list-rank-bg-first: #f44336;
$list-rank-bg-second: #ff9800;
$list-rank-bg-third: #ffca28;

.mh-list-line {
  padding: 0;
  list-style: none;
  
  & > li {
    & > .line {
      white-space: nowrap;
      overflow: hidden;
      padding: .5rem 0;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;
    }
    
    color: $link-color;
    
    &:hover {
      color: $link-hover-color;
    }
  }
  
  &.mh-list-line-right-arrow {
    & > li {
      & > .line {
        width: calc(100% - 2rem);
      }
      
      &:after {
        content: "〉";
        display: inline-block;
        float: right;
        line-height: 3rem;
      }
    }
  }
  
  &.mh-list-line-right-date {
    & > li {
      & > .line {
        width: calc(100% - 4rem);
      }
      
      & > .mh-list-date {
        display: inline-block;
        float: right;
        line-height: 3rem;
      }
    }
  }
  
  .mh-list-line-rank {
    display: inline-block;
    font-size: 85%;
    width: 1.4em;
    height: 1.5em;
    line-height: 1.5;
    background: $list-rank-bg-default;
    color: $white-nature;
    border-radius: 2px;
    text-align: center;
    margin: 2px 0 1px;
    
    &.mh-list-line-rank-first {
      background: $list-rank-bg-first;
    }
    
    &.mh-list-line-rank-second {
      background: $list-rank-bg-second;
    }
    
    &.mh-list-line-rank-third {
      background: $list-rank-bg-third;
    }
  }
  
  a {
    &:hover {
      text-decoration: none;
    }
  }
}